<script setup lang='ts'>
const props = defineProps(['uuid', 'text', 'label', 'updateFn'])
const inputVal = ref('')
const loading = ref(false)
const visible = ref(false)

async function confirm() {
  if (!inputVal.value) {
    ElMessage.warning(`请输入${props.label}`)
    return
  }
  loading.value = true
  await props.updateFn({
    uuid: props.uuid,
    newVal: inputVal.value,
  })
  loading.value = false
  visible.value = false
  inputVal.value = ''
}
const popoverRef = ref()
const inputRef = ref()
watch(visible, (val) => {
  if (val) {
    inputVal.value = props.text
    nextTick(() => inputRef.value.focus())
  }
})
onClickOutside(popoverRef, () => visible.value = false)
</script>

<template>
  <el-popover :visible="visible" placement="top" :width="240" trigger="click" popper-class="updaate-text-popover">
    <template #reference>
      <span>
        <span class="max-w-50 truncate">{{ props.text }}</span>
        <i-uil:edit-alt class="text-#409eff" @click="visible = true" />
      </span>
    </template>
    <p ref="popoverRef" class="flex-y-center space-x-1">
      <el-input
        ref="inputRef"
        v-model="inputVal"
        :placeholder="`请输入${props.label}`"
        size="small"
        class="h-8 !w-50"
        clearable
        @keydown.enter="confirm"
      />

      <i-svg-spinners:8-dots-rotate v-if="loading" class="text-slate" />
      <i-ci:circle-check-outline v-else title="确定" class="text-#4cd263" @click="confirm" />
    </p>
  </el-popover>
</template>

<style scoped lang='scss'>

</style>
